<template>
  <div>
    <div class="prompt">{{chanTip}}</div>
    <div class="main">
      <div v-show="isNull&&isNulls" class="no">
        <img src="../../assets/images/no_infor.png"/>
        <p>最近无缴费记录！</p>
      </div>
      <div v-show="!isNull" class="item" v-for="item in dataList">
        <div class="it_hd">
          <span class="time">{{item.aae002.substring(0, 4)}}</span>
          <span class="state">{{item.aaa115_desc}}</span>
        </div>
        <div class="it_hb">
          <div class="t">
            <span>个人缴费：</span>
            <span class="geren">{{parseFloat(item.aae022).toFixed(2)}}</span>
          </div>
          <div class="t">
            <span>到账年月：</span>
            <span class="zhengfu">{{item.aae079}}</span>
          </div>
        </div>
      </div>
      <div v-show="!isNulls" class="item" v-for="item in dataLists">
        <div class="it_hd">
          <span class="time">{{item.aae002}}</span>
          <span class="state">{{item.aae143_desc}}</span>
        </div>
        <div class="it_hb">
          <div class="">
            <span>缴费基数：</span>
            <span class="jishu">{{parseFloat(item.bac504).toFixed(2)}}</span>
          </div>
          <div class="t">
            <span>单位缴费：</span>
            <span class="danwei">{{parseFloat(item.aac125).toFixed(2)}}</span>
          </div>
          <div class="t">
            <span>个人缴费：</span>
            <span class="geren">{{parseFloat(item.bac702).toFixed(2)}}</span>
          </div>
          <div class="t">
            <span>到账年月：</span>
            <span class="zhengfu">{{item.bae706.substring(0, 7)}}</span>
          </div>
          <!--<span class="gongsi">浙江网新恩普软件</span>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'index',
    data () {
      return {
        dataList: [],
        token: localStorage.getItem("token"),
        cardNum: this.$route.query.card,
        type: this.$route.query.type,
        isNull: false,
        isNulls: false,
        chanTip: '最近10年缴费记录',
        dataLists:[]
      }
    },
    methods: {
      getDataList(){
        this.$http.get("/jkakrs_jmyl_jfxx", {
          params: {
            access_token: this.token,
            AAC002: this.cardNum,
            AAE140: this.type
          }
        }).then(res => {
          console.log(res)
          if (res.success) {
            this.dataList = res.body;
            if (res.body.aac002) {
              this.isNull = false;
            } else {
              this.dataList = [];
              this.isNull = true;
            }
          }
        });
      },
      getDataLists(){
        this.$http.get("/jkakrs_yljf_001", {
          params: {
            access_token: this.token,
            AAC002: this.cardNum,
            AAE140: this.type
          }
        }).then(res => {
          console.log(res)
          if (res.success) {
            this.dataLists = res.body;
            if (res.body[0].aac002) {
              this.isNulls = false;
            } else {
              this.dataLists = [];
              this.isNulls = true;
            }
          }
        });
      }
    },
    created() {
        if(this.type==110){
            this.chanTip="最近24个月缴费记录";
            this.getDataLists();
        }else { this.getDataList();}
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .main,.prompt{padding: 0 15px 0 15px;box-sizing: border-box;}
  .prompt{font: 14px/14px "";margin-top: 16px;margin-bottom: 14px;color: #888888;box-sizing: border-box;font-size: 14px;}


  .main .item{border-radius: 5px;margin-bottom: 15px;box-shadow: 1px 1px 5px #C2E1FF;}
  .main .item .it_hd{background: #3399FF;border-radius: 5px 5px 0 0;box-sizing: border-box;padding: 0 15px 0 15px;font: 14px/25px "";color: #FFFFFF;position: relative;font-size: 14px;line-height: 25px;}
  .main .item .it_hd .time{font-family: arial;}
  .main .item .it_hd .state{position: absolute;right: 15px;}

  .main .no{text-align: center;margin-top: 40px;}
  .main .no img{width: 45%;margin-top: 30px;}
  .main .item .it_hb{background: #FFFFFF;border-radius: 0 0 5px 5px;box-sizing: border-box;padding: 16px 15px 16px 15px;}
  .main .item .it_hb div{position: relative;}
  .main .item .it_hb div span{font: 13px/30px "";color: #888888;font-size: 13px;line-height: 30px;}
  .main .item .it_hb div.t{display: inline-block;width: 48%;}
  .main .item .it_hb .jishu{color: #353535;/*font-weight: 900;*/font-family: arial;}
  .main .item .it_hb .zhengfu{color: #353535;/*font-weight: 900;*/font-family: arial;}
  .main .item .it_hb .danwei{color: #353535;/*font-weight: 900;*/font-family: arial;}
  .main .item .it_hb .geren{color: #353535;/*font-weight: 900;*/font-family: arial;}
  .main .item .it_hb .gongsi{font: 13px/30px "";color: #888888;display: block;font-size: 13px;line-height: 30px;}

</style>
